<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" :empty-view-center="false" :hide-no-more-by-limit="10">
		<!-- 		<template v-slot:top>
			<view class="searchBox">
				<uni-search-bar
					placeholder="搜索商品名称、装车地点、卸车地点"
					@confirm="search"
					v-model="searchValue"
					@input="input"
					@cancel="cancel"
					@clear="clear"
				></uni-search-bar>
			</view>
		</template> -->
		<view class="box">
			<!-- 关注的行业 搜索 -->
			<view
				:class="['container', index + 1 != dataList.length && 'conLines']"
				v-for="(item, index) in dataList"
				:key="index"
				@click="navTo(`/pages/yuShuo/index/home/orderDetails/orderDetails`, { item })"
			>
				<view class="shopType">
					<text class="circle">{{ index + 1 }}</text>
					<text>{{ auditLabel[item.salesmanType] }}</text>
				</view>

				<!-- 采购订单1、销售订单2、取消订单3 -->
				<view class="con" v-if="[1, 2, 3].includes(+item.salesmanType)">
					<view class="item">
						<text class="type">合同编号:</text>
						<text>{{ item.apContractNumber }}</text>
					</view>
					<view class="item">
						<text class="type">单位名称:</text>
						<text>{{ item.payCompanyName }}</text>
					</view>
					<view class="item">
						<text class="type">提交人:</text>
						<text>{{ item.applyUser }}</text>
					</view>
					<view class="item">
						<text class="type">提交日期:</text>
						<text>{{ item.applyTime }}</text>
					</view>
				</view>
				<!-- 物流付费显示 4 -->
				<view class="con" v-if="+item.salesmanType == 4">
					<view class="item">
						<text class="type">车号:</text>
						<text>{{ item.lsVehicleNo }}</text>
					</view>
					<view class="item">
						<text class="type">司机:</text>
						<text>{{ item.lsDriverName }}</text>
					</view>
					<view class="item">
						<text class="type">提交人:</text>
						<text>{{ item.applyUser }}</text>
					</view>
					<view class="item">
						<text class="type">提交日期:</text>
						<text>{{ item.applyTime }}</text>
					</view>
				</view>
				<!-- 发票 5 -->
				<view class="con" v-if="+item.salesmanType == 5">
					<view class="item">
						<text class="type">合同编号:</text>
						<text>{{ item.irContractNumber }}</text>
					</view>
					<view class="item">
						<text class="type">客户:</text>
						<text>{{ item.irCustom }}</text>
					</view>
					<view class="item">
						<text class="type">申请人:</text>
						<text>{{ item.applyUser }}</text>
					</view>
					<view class="item">
						<text class="type">申请日期:</text>
						<text>{{ item.applyTime }}</text>
					</view>
				</view>
				<!-- 收/付款单 6 -->
				<view class="con" v-if="+item.salesmanType == 6">
					<view class="item">
						<text class="type">单据编号:</text>
						<text>{{ item.payReceiptNumber }}</text>
					</view>
					<view class="item">
						<text class="type">供应商:</text>
						<text>{{ item.payCompanyName }}</text>
					</view>
					<view class="item">
						<text class="type">业务类型:</text>
						<text>{{ item.payReceiptType }}</text>
					</view>
				</view>
				<!-- 报车人 7 -->
				<view class="con" v-if="+item.salesmanType == 7">
					<view class="item">
						<text class="type">单据编号:</text>
						<text>{{ item.payReceiptNumber }}</text>
					</view>
					<view class="item">
						<text class="type">供应商:</text>
						<text>{{ item.payCompanyName }}</text>
					</view>
					<view class="item">
						<text class="type">业务类型:</text>
						<text>{{ item.payReceiptType }}</text>
					</view>
				</view>
				<!-- 用车需求车辆填写 8 -->
				<view class="con" v-if="+item.salesmanType == 8">
					<view class="item">
						<text class="type">单据编号:</text>
						<text>{{ item.payReceiptNumber }}</text>
					</view>
					<view class="item">
						<text class="type">供应商:</text>
						<text>{{ item.payCompanyName }}</text>
					</view>
					<view class="item">
						<text class="type">业务类型:</text>
						<text>{{ item.payReceiptType }}</text>
					</view>
					<view class="item">
						<text class="type">创建日期:</text>
						<text>{{ item.createTime }}</text>
					</view>
				</view>
				<!--榜单审批 10 -->
				<view class="con" v-if="+item.salesmanType == 10">
					<!-- <view class="item">
						<text class="type">物流公司:</text>
						<text>{{ item.companyName }}</text>
					</view>
					<view class="item">
						<text class="type">报车人:</text>
						<text>{{ item.name }}</text>
					</view> -->
					<view class="item">
						<text class="type">司机:</text>
						<text>{{ item.lsDriverName }}</text>
					</view>
					<view class="item">
						<text class="type">车号:</text>
						<text>{{ item.lsVehicleNo }}</text>
					</view>
					<!-- <view class="item">
						<text class="type">实装吨位:</text>
						<text>{{ item.loadingTonnage }}</text>
					</view>
					<view class="item">
						<text class="type">实卸吨位:</text>
						<text>{{ item.unloadTonnage }}</text>
					</view> -->
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
import { ref, reactive, onMounted, toRefs, watch } from 'vue';
import http from '@/common/request.js';
import { onLoad, onUnload, onShow, onHide, onReady } from '@dcloudio/uni-app';
import { navTo } from '@/common/utils';
import { getProcessList } from '@/api/yuShuo';
import { auditLabel } from '../../../../../common/copyPc';

const props = defineProps({
	item: {
		type: Object
	},
	salesmanId: {
		type: String
	}
});

const { item, salesmanId } = toRefs(props);

const dataList = ref([]);
const paging = ref(null);
const search = ref('');

const updateVehicleState = (id, vehicleState) => {};

let params = {};

const queryList = (pageNumber, pageSize) => {
	if (pageNumber) {
		params = {
			pageNumber,
			pageSize
		};
	}

	params = {
		...item.value.params,
		...params
	};

	getProcessList(params).then((res) => {
		if (res.code === 1) {
			paging.value.complete(res.data.rows);
		} else {
			paging.value.complete([]);
		}
	});
};

// 监听元素被审批
watch(
	() => salesmanId.value,
	(newVal) => {
		if (newVal) {
			// 修改对应的id为已审批
			const newData = dataList.map((v) => {
				if ((v.sid = id)) {
					// 修改为已审批状态
					v.approvalState = 2;
				}
			});
			console.log('newData =====> ', newData);
			paging.value.complete(newData);
		}
	}
);
</script>

<style scoped lang="scss">
.conLines {
	border-bottom: 6rpx solid #f8f8f8;
}

.searchBox {
	padding: 10rpx;
	// border: 1rpx solid red;
}

.container {
	padding: 20rpx 30rpx;

	.shopType {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 0;

		.circle {
			margin-right: 10rpx;
			font-size: 24rpx;
			display: flex;
			width: 40rpx;
			height: 40rpx;
			background-color: #51a9ec;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			color: #fff;
		}
	}

	.con {
		display: flex;
		flex-direction: column;
		// border: 1rpx solid red;
		background-color: #fff;

		.conRow {
			display: flex;
		}

		.item {
			flex: 1;
			padding: 10rpx 0;
			// border: 1px solid red;
			display: flex;
			justify-content: space-between;

			.type {
				color: #bdbdbd;
				font-size: 26rpx;
			}

			.unit {
				font-size: 23rpx;
			}

			.rightBox {
				display: flex;
				align-items: center;

				.text {
					font-weight: 500;
					font-size: 26rpx;
					width: 500rpx;
					text-align: right;
				}

				.img {
					width: 35rpx;
					height: 35rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
}
</style>
